<template>
  <div class="breadcrumb">
    <a-breadcrumb>
      <template v-for="(item, index) in breadcrumb">
        <a-breadcrumb-item  :key="index">
          <a-menu slot="overlay" v-if="item.children && item.children.length>0">
            <template v-for="(route,i) in item.children">
              <a-menu-item :key="index+i">
                <a target="_blank" @click="toPath(route)">
                  {{$t(getI18nKey(route.fullPath || route.path))}}
                </a>
              </a-menu-item>
            </template>
          </a-menu>
          <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
          {{$t(getI18nKey(item.fullPath || item.path))}}
        </a-breadcrumb-item>
      </template>
    </a-breadcrumb>
  </div>
</template>

<script>
import { Breadcrumb as ABreadcrumb } from 'ant-design-vue'
import { getI18nKey } from '@/utils/routerUtil'
export default {
  components: {
    ABreadcrumb,
    ABreadcrumbItem: ABreadcrumb.Item
  },
  computed: {
    breadcrumb() {
      const routes = this.routes()
      return routes.slice(1)
    }
  },
  methods: {
    getI18nKey,
    routes() { // 获取路由可展示的子集路由
      var routes = {
        children: this.$router.options.routes
      }

      var route = this.$route.matched
      for (var i = 0; i < route.length - 1; i++) {
        routes = routes.children.find((e) => {
          return e.name ? e.name === route[i].name : (e.fullPath === route[i].path)
        })
        route[i].children = routes.children.filter(item => {
          return !item.meta.hidden && item.meta?.urlType === 'C'
        })
        // route[i].children = routes.children
      }

      return route
    },
    toPath(route) {
      if (this.$route.path !== route.fullPath) {
        this.$router.push({ path: route.fullPath })
      }
    }
  }
}
</script>
<style lang="less">
  .breadcrumb{
    .ant-breadcrumb{
      line-height: 48px;
    }
  }
</style>
